<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* color: brown; */
        }
        .c{
            color: red;
        }
    </style>
</head>
<body>

    <button class="c">1</button>
    <button>2</button>
    <button>3</button>


    <p class="c">1</p>
    <p>2</p>

    <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
    <script>

        // // 传的参数是两个字符串的时候，表示设置样式
        // $('p').css('color' , 'red') ;

        // // 传的参数是一个字符串的时候，表示或者样式
        // console.log($('p').css('color'))


        // // 传的参数是一个对象的时候，表示设置多个样式
        // $('p').css({
        //     color : 'red' ,
        //     fontSize : '20px'
        // })



        function GetEle(ele) {
            this.eles = document.querySelectorAll(ele) ;
        }


        GetEle.prototype.css = function() {
            // 两个参数就是设置样式
            if(arguments.length === 2) {
                this.eles.forEach(v => {
                    v.style[arguments[0]] = arguments[1] ;
                })
            }
            // 参数是一个对象 , 设置样式  typeof或者instanceOf
            else if(typeof arguments[0] === 'object') {
                const obj = arguments[0] ;
                this.eles.forEach(v => {
                    // 遍历对象
                    for(let key in obj) {
                        v.style[key] = obj[key] ;
                    }
                })
            }
            // 参数只有一个
            else {
                // 默认返回获取到的第一个元素的样式
                const prop = arguments[0] ;
                return getComputedStyle(this.eles[0])[prop]
            }
        }


        // class操作   字符串
        GetEle.prototype.addClass = function(name) {
            this.eles.forEach( v=> {
                v.className += ' ' + name ;
            })
        }

        GetEle.prototype.removeClass = function(name) {
            this.eles.forEach( v=> {
                // 把类名进行切割
                const arr = name.split(' ') ;
                arr.forEach(val => {
                    v.classList.remove(val) ;
                })
            })
        }


        // 切换类名   如果有就删除，如果没有就添加
        GetEle.prototype.toggleClass = function(name) {
            this.eles.forEach( v=> {
                // const arr = v.className.split(' ') ;
                // 把伪数组转真数组   class="box cl clear"    box
                const arr = [...v.classList] ;
                console.log(arr);
                if(arr.includes(name)) {
                    v.classList.remove(name) ;
                } else {
                    v.classList.add(name) ;
                }
            })
        }

          // 绑定点击事件
          GetEle.prototype.click = function(cb) {
            this.eles.forEach( v=> {
                v.onclick = cb ;
            })
        }


        // attr  设置自定义属性  attr('index')返回这个属性值   attr('index' , '1')设置自定义属性





        function $(ele){
            return new GetEle(ele) ;
        }



        // $('p').css('color' , 'blue')

        // $('p').css({
        //     color : 'yellow' ,
        //     fontSize: '40px'
        // })


        const res = $('p').css('color') ;
        console.log(res);


        // 页面的多次重绘和回流
        // p.style.color = 'yellow' ;
        // p.style.fontSize = '40px' ;


        $('p').addClass('a b') 


        $('p').removeClass('a b') ;


        $('p').toggleClass('c')


        $('button').click(function() {
            $('button').toggleClass('c') ;
        })

    </script>
    
</body>
</html>